<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div style="min-width: 1024px">
        <h4>训练计划管理</h4>
        <Alert show-icon>
            此处用于训练计划管理。
        </Alert>
        <ButtonGroup>
            <Button type="success" @click="jumpPage('','planAdd')">
                <Icon type="md-add-circle"/>
                添加
            </Button>
            <Button type="warning" :disabled="deleteBtnEnable" @click="remove">
                <Icon type="md-close-circle"/>
                删除
            </Button>
        </ButtonGroup>
        <Row>
            <Col>
                <Table :context="self" :data="tableData" :columns="tableColumns" stripe border
                       @on-select="tableItemChecked" @on-select-cancel="tableItemChecked"
                       @on-select-all="tableItemChecked"
                       @on-select-all-cancel="tableItemChecked"
                       style="margin-top:15px;">
                </Table>
            </Col>
        </Row>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="total" size="large" show-total :current="current" show-elevator show-sizer
                      @on-change="changePage"></Page>
            </div>
        </div>
        <!--添加-->
        <Modal v-model="addModal" title="添加" @on-ok="handleSubmitAdd('formValidate')"
               @on-cancel="addModal =false">
            <Form ref="formValidate" :model="formValidate" :label-width="100">
                <Form-item label="训练单内编号" prop="Trainingsn">
                    <i-input v-model="formValidate.Trainingsn" placeholder="请输入训练单内编号"></i-input>
                </Form-item>
                <Form-item label="训练目标" prop="ip">
                    <i-input v-model="formValidate.Target" placeholder="请输入训练目标"></i-input>
                </Form-item>
                <Form-item label="训练内容" prop="Targetcontent">
                    <i-input v-model="formValidate.Targetcontent" placeholder="请输入训练内容"></i-input>
                </Form-item>
                <Form-item label="选择计划周期" prop="Targetcontent">
                    <i-select v-model="formValidate.Targetcontent" placeholder="请选择是否日计划">
                        <i-option value="Isdaily">日计划</i-option>
                        <i-option value="Isweekly">周计划</i-option>
                        <i-option value="Ismonthly">半月计划</i-option>
                        <i-option value="Isquarterly">季度计划</i-option>
                    </i-select>
                </Form-item>
                <Form-item label="是否完成" prop="Isfinished">
                    <i-select v-model="formValidate.Isfinished" placeholder="请选择是否半月计划">
                        <i-option value="true">是</i-option>
                        <i-option value="false">否</i-option>
                    </i-select>
                </Form-item>
                <Form-item label="结束时间">
                    <Row>
                        <i-col span="11">
                            <Date-picker type="datetime" placeholder="选择结束时间"
                                         @on-change="changeFinishedDate"></Date-picker>
                        </i-col>
                    </Row>
                </Form-item>
                <Form-item label="训练的起始时间">
                    <Row>
                        <i-col span="11">
                            <Date-picker type="datetime" placeholder="选择开始日期"
                                         @on-change="changeStartDate"></Date-picker>
                        </i-col>
                    </Row>
                </Form-item>
                <Form-item label="训练的结束时间">
                    <Row>
                        <i-col span="11">
                            <Date-picker type="datetime" placeholder="选择结束日期" @on-change="changeEndDate"></Date-picker>
                        </i-col>
                    </Row>
                </Form-item>

                <Form-item label="单位" prop="Partid">
                    <input v-model="formValidate.Partid"
                           style="border: 1px solid #f0f0f0;padding: 0 23px;border-radius: 4px;width: 200px"
                           placeholder="点击选择单位(必填)"
                           @click="openUnitModel()">
                </Form-item>
                <Form-item label="部门" prop="Unitid">
                    <input v-model="formValidate.Unitid"
                           style="border: 1px solid #f0f0f0;padding: 0 23px;border-radius: 4px;width: 200px"
                           placeholder="点击选择部门(必填)"
                           @click="openOrgModel()">
                </Form-item>

            </Form>
        </Modal>
        <!--编辑-->
        <Modal v-model="editModal" title="编辑" @on-ok="handleSubmitEdit('formValidateEdit')"
               @on-cancel="editModal =false">
            <Form ref="formValidateEdit" :model="formValidateEdit" :label-width="100">
                <Form-item label="选择分组" prop="videoGroup">
                    <i-select v-model="formValidateEdit.groupId" placeholder="请选择监控分组">
                        <template v-for="(item,index) in videoGroup">
                            <i-option :value="item.Id">{{item.Title}}</i-option>
                        </template>
                    </i-select>
                </Form-item>
                <Form-item label="摄像头名称" prop="title">
                    <i-input v-model="formValidateEdit.title" placeholder="请输入摄像头名称"></i-input>
                </Form-item>
                <Form-item label="IP地址" prop="ip">
                    <i-input v-model="formValidateEdit.ip" placeholder="请输入IP地址"></i-input>
                </Form-item>
                <Form-item label="用户名" prop="username">
                    <i-input v-model="formValidateEdit.username" placeholder="请输入用户名"></i-input>
                </Form-item>
                <Form-item label="密码" prop="password">
                    <i-input v-model="formValidateEdit.password" type="password" placeholder="请输入密码"></i-input>
                </Form-item>
                <Form-item label="端口" prop="port">
                    <i-input v-model="formValidateEdit.port" type="number" placeholder="请输入端口"></i-input>
                </Form-item>
            </Form>
        </Modal>
        <!--选择单位、部门-->
        <Modal v-model="isShowModal" title="下面列表选择单位" @on-ok=""
               @on-cancel="isShowModal =false">
            <Tree :show-checkbox="showCheckbox" :data="mainorgData" @on-select-change="mainOrgClickEvent"></Tree>
        </Modal>
        <Modal v-model="isShowModal2" title="下面列表选择部门" @on-ok=""
               @on-cancel="isShowModal2 =false">
            <Tree :show-checkbox="showCheckbox" :data="orgData" @on-select-change="orgClickEvent"></Tree>
        </Modal>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                //添加
                formValidate: {
                    //添加字段
                    Trainingsn: '',
                    Target: '',
                    Targetcontent: '',
                    Startdate: '',
                    Enddate: '',
                    Creatorid: '',
                    Isdaily: false,
                    Isweekly: false,
                    Ishalfmonthly: false,
                    Ismonthly: false,
                    Isfinished: '',
                    Finishdate: '',
                    Partid: '',
                    Unitid: '',
                    Isquarterly: '',
                },
                chooseAreaArr: [],
                addModal: false,
                //编辑
                formValidateEdit: {
                    Trainingsn: '',
                    Target: '',
                    Targetcontent: '',
                    Startdate: '',
                    Enddate: '',
                    Creatorid: '',
                    Isdaily: '',
                    Isweekly: '',
                    Ishalfmonthly: '',
                    Isfinished: '',
                    Finishdate: '',
                    Partid: '',
                    Unitid: '',
                    Isquarterly: '',
                    Ismonthly: '',
                },
                editModal: false,
                //操作按钮状态管理
                deleteBtnEnable: true,
                selectedItems: [],
                //表格
                total: 0,
                current: 1,
                tableColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '训练单内编号',
                        key: 'Trainingsn',
                        align: 'center',
                    },
                    {
                        title: '训练目标',
                        key: 'Target',
                        align: 'center',
                    },
                    {
                        title: '训练内容',
                        key: 'Targetcontent',
                        align: 'center',
                    },
                    {
                        title: '计划周期',
                        key: 'PlainType',
                        align: 'center',
                    },
                    {
                        title: '计划开始时间',
                        key: 'Startdate',
                        align: 'center',
                    },
                    {
                        title: '计划结束时间',
                        key: 'Enddate',
                        align: 'center',

                    },
                    {
                        title: '单位',
                        key: 'UnitTitle',
                        align: 'center',
                    },
                    {
                        title: '部门',
                        key: 'PartTtile',
                        align: 'center',
                    },
                    {
                        title: '结束时间',
                        key: 'Finishdate',
                        align: 'center',
                        render: function (h, params) {
                            return h('span', params.row.Finishdate ? params.row.Finishdate : '训练未结束')
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: '',
                        align: 'center',
                        render: (h, params) => {
                            if (params.row.Finishdate) {
                                return h('div', [
                                        h('Button', {
                                            props: {
                                                type: 'primary',
                                                size: 'small'
                                            },
                                            style: {
                                                'margin-right': '10px',
                                            },
                                            on: {
                                                click: () => {
                                                    this.jumpPage(params.row.Id, 'planLogList')
                                                }
                                            }
                                        }, '训练记录'),
                                    ]
                                )
                            } else {
                                return h('div', [
                                        h('Button', {
                                            props: {
                                                type: 'error',
                                                size: 'small'
                                            },
                                            style: {
                                                'margin-right': '10px',
                                            },
                                            on: {
                                                click: () => {
                                                    this.setTraningEndStateEvent(params.row)
                                                }
                                            }
                                        }, '结束'),
                                        h('Button', {
                                            props: {
                                                type: 'primary',
                                                size: 'small'
                                            },
                                            style: {
                                                'margin-right': '10px',
                                            },
                                            on: {
                                                click: () => {
                                                    this.jumpPage(params.row.Id, 'planLogList')
                                                }
                                            }
                                        }, '训练记录'),
                                    ]
                                )
                            }

                        }
                    }
                ],
                //监控分组数据
                videoGroup: '',
            }
        },
        mounted() {
            this.mockTableData();
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            //选择时间
            changeStartDate: function (date) {
                console.log(date);
                this.formValidate.Startdate = date;
            },
            changeEndDate: function (date) {
                console.log(date);
                this.formValidate.Enddate = date;
            },
            changeFinishedDate: function (date) {
                console.log(date);
                this.formValidate.Finishdate = date;
            },
            //选择时间
            changeStartDate2: function (date) {
                console.log(date);
                this.formValidateEdit.Startdate = date;
            },
            changeEndDate2: function (date) {
                console.log(date);
                this.formValidateEdit.Enddate = date;
            },
            changeFinishedDate2: function (date) {
                console.log(date);
                this.formValidateEdit.Finishdate = date;
            },
            mockTableData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetTrainingPlans, para, function (res) {
                    that.$Loading.finish();
                    that.total = res.Msg.TotalCount;
                    that.current = res.Msg.CurrentPage;
                    that.tableData = res.Msg.Arrays;
                });

            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            },
            //结束训练
            setTraningEndStateEvent: function (row) {
                let that = this;
                let para = {
                    id: row.Id,
                    isFinished: true
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.post(that, apiUtil.urls.SetTraningEndState, params, function (res) {
                    that.mockTableData();
                });
            },
            // 表格内选中及取消选中操作
            tableItemChecked: function (selection, row) {

                this.selectedItems = selection;
                console.log('选择删除项:', selection);

                if (this.selectedItems.length > 1) {
                    // 此处添加不要多选的提示
                    this.$Message.warning('此处不允许批量删除 ');
                    this.deleteBtnEnable = true;

                } else {
                    this.deleteBtnEnable = false;
                }
            },

            //删除
            remove: function () {
                let self = this;
                let that = this;
                this.$Modal.confirm({
                    title: '操作警告',
                    content: '即将删除选中的区域项，该操作不可逆转，请确认您的操作。',
                    onOk: function () {
                        this.$Loading.start();
                        var selectedItemIds = "";
                        for (var i = 0; i < that.selectedItems.length; i++) {
                            selectedItemIds += that.selectedItems[i].Id.toString() + ",";
                        }
                        selectedItemIds = selectedItemIds.substring(0, selectedItemIds.length - 1);
                        let para = {id: selectedItemIds};
                        let params = that.$qs.stringify(para);

                        apiUtil.post(that, apiUtil.urls.DelTraning, params, function (res) {
                            that.$Message.success('删除成功。');
                            that.mockTableData();
                        });
                    }
                });
            },
            //添加
            handleSubmitAdd(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.addData(model);
                });
            },
            addData: function (model) {
                let that = this;

                let params = that.$qs.stringify(model);
                this.$Loading.start();

                console.log(params);

                apiUtil.post(that, apiUtil.urls.AddTrainingPlan, params, function (res) {
                    that.$Loading.finish();
                    that.addModal = false;
                    that.mockTableData();
                    that.$Message.info('添加成功 ');
                    that.handleReset('formValidate');

                });
            },
            //重置表单
            handleReset(name) {
                this.$refs[name].resetFields();
            },
            //点击编辑
            editClick: function (row) {
                this.editModal = true;
                this.formValidateEdit.title = row.Title;
                this.formValidateEdit.username = row.Loginusername;
                this.formValidateEdit.password = row.Loginuserpwd;
                this.formValidateEdit.ip = row.Ip;
                this.formValidateEdit.port = row.Loginport;
                this.formValidateEdit.id = row.Id;
                this.formValidateEdit.groupId = row.Groupid;
            },
            handleSubmitEdit(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.comfirmModifyPSEdit(model);
                })
            },
            comfirmModifyPSEdit: function (model) {
                let that = this;
                let params = {};

                params = that.$qs.stringify(model);
                apiUtil.post(that, apiUtil.urls.EditTraning, params, function (res) {
                    that.$Message.info('修改成功 ');
                    that.editModal = false;
                    that.mockTableData();

                });
            },
            /**
             * 单位部门
             */
            //打开选择单位模态框
            openUnitModel: function () {
                let that = this;
                that.getMainOrgData();
            },
            //打开选择部门模态框
            openOrgModel: function () {
                let that = this;
                if (this.TopId) {
                    this.isShowModal2 = true;
                } else {
                    that.$Notice.open({
                        title: '提示',
                        desc: '请添加单位过后再选择部门。'
                    });
                }
            },
            //选择单位
            mainOrgClickEvent: function (data) {
                console.log('单位数据:', data);
                this.formValidate.TopTitle = data[0].title;
                this.TopId = data[0].id;
                this.getOrgArr(data[0].id);
            },
            //选择部门
            orgClickEvent: function (data) {
                console.log('部门数据:', data);
                this.formValidate.orgTitle = data[0].title;
                this.Partid = data[0].id;
            },
            //获取单位数据
            getMainOrgData: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetUnitList, params, function (res) {
                    that.$Loading.finish();
                    if (res.Msg.length == 0) {
                        that.$Notice.open({
                            title: '提示',
                            desc: '系统中暂无单位信息，请在组织结构中进行添加。'
                        });
                    } else {
                        res.Msg.forEach(function (item, index) {
                            item.expand = true;
                        })

                        that.mainorgData = res.Msg;
                        that.isShowModal = true;

                        console.log('mainorgdata:', that.mainorgData);
                    }

                });
            },
            //获取指定单位下的部门
            getOrgArr: function (id) {
                let that = this;

                let para = {
                    parentId: id,
                };

                this.$Loading.start();
                that.formValidate.orgTitle = '';
                that.Partid = '';
                apiUtil.get(that, apiUtil.urls.GetDeptList, para, function (res) {
                    that.$Loading.finish();
                    if (res.Msg.length <= 0) {
                        that.formValidate.orgTitle = '';
                        that.Partid = '';
                        that.$Notice.open({
                            title: '提示',
                            desc: '前选择项无部门信息，请他先添加部门之后再进行添加或编辑。'
                        });
                    }
                    that.orgData = res.Msg;
                });
            },
        },
    }
</script>
